<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<!--根据设置确定视口宽度，device-width表示采用设备宽度，初始缩放1.0，使用user-scalable=no可以禁用其缩放（zooming）功能-->
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>My Best bread</title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="index.css" />
		<link rel="stylesheet" type="text/css" href="bootstrap/css/xiaomianbao.css" />
		<link rel="stylesheet" type="text/css" href="bootstrap/css/footer.css"/>
		
		<style type="text/css">
			.navbar-brand img {
				width: 80px;
				height: 40px;
			}
			
			a {
				color: black;
				text-decoration: none;
			}
			
			a:hover {
				color: red;
			}
			
			.menu {
				left: 800px;
				font-family: STXingkai;
				font-size: 22px;
			}
			.stage{position: fixed;top: 0;	left: 0;width: 100%;height: 100%;z-index: 5;pointer-events: none}
		</style>
	</head>

	<body>
		<canvas id="stage1" class="stage"></canvas>
        <canvas id="stage2" class="stage"></canvas>
		<!-- 1、头部-->
		<div id="header">
			<!--响应式导航栏-->
			<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
						<a class="navbar-brand" href="#"> <img src="img/pic/LOGO1.png" /> </a>
					</div>
					<div class="collapse navbar-collapse" id="example-navbar-collapse">
						<ul class="nav navbar-nav">
							<li class="menu active">
								<a href="#">首页</a>

							</li>
							<li class="menu">
								<a href="#">产品推荐</a>
								<ul class="wrap">
									<li>
										<a href="#">白烧芋泥</a>
									</li>
									<li>
										<a href="#">地瓜火山封</a>
									</li>
									<li>
										<a href="#">干果面包</a>
									</li>
								</ul>

							</li>
							<li class="menu">
								<a href="#">新概念面包</a>
								<ul class="wrap">
									<li>
										<a href="#">奶酪甜心</a>
									</li>
									<li>
										<a href="#">豆沙诱惑</a>
									</li>
									<li>
										<a href="#">蔓梅心情</a>
									</li>
								</ul>

							</li>
							<li class="menu">
								<a href="#">微博</a>
								<ul class="wrap">
									<li>
										<a href="#">软欧包</a>
									</li>
									<li>
										<a href="#">全麦面包</a>
									</li>
									<li>
										<a href="#">法国面包</a>
									</li>
								</ul>

							</li>
						</ul>

						<ul class="nav navbar-nav navbar-right">
							<li>
								<a href="register.html" target="_blank" >会员注册</a>
							</li>
							<li>
								<a href="">登录</a>
							</li>
						</ul>
					</div>
				</div>
			</nav>
		</div>

		<!--2、轮播图-->
		<div id="lunbo">
			<div id="myCarousel" class="carousel slide">
				<!-- 轮播（Carousel）指标 -->
				<ol class="carousel-indicators">
					<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
					<li data-target="#myCarousel" data-slide-to="1"></li>

				</ol>
				<!-- 轮播（Carousel）项目 -->
				<div class="carousel-inner">
					<div class="item active">
						<img src='img/成品面包.png' alt="First slide">
					</div>
					<div class="item">
						<img src='img/小麦发酵.png' alt="Second slide">
					</div>

				</div>
				<!-- 轮播（Carousel）导航 -->
				<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
					<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
					<span class="sr-only">Previous</span>
				</a>
				<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
					<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
					<span class="sr-only">Next</span>
				</a>
			</div>
		</div>

		<!--3、新品推荐-->
		<div class="myrow our-grade">
			<div class="container">
				<!--头部行：只显示一列-->
				<div class="row">
					<!--列-->
					<div class="col-sm-12 main-title">
						<h2 class="h2">新品推荐</h2>
						<p class="line"></p>

					</div>
				</div>
				<!--行：显示3列-->
				<div class="dakuang1">
					<ul class="xiaokuan1">
						<li>
							<a href="">
								<img src='img/pic/小面包1.png' />
								<h4>白烧芋泥</h4>
							</a>

							<hr>
							<p>小心掰开圆滚的面包，点点香兰叶调出浓浓的芋头香，一丝难以形容的清新香甜传入鼻尖。</p>
						</li>
						<li>
							<a href="">
								<img src="img/pic/小面包2.png" />
								<h4>地瓜火山封</h4>
							</a>

							<hr>
							<p>沿着酥脆表皮一圈一圈撕开柔软的面包，丝滑的卡士达鲜奶油，软糯的板栗红薯馅，甜蜜与醇香升华。</p>
						</li>
						<li>
							<a href="">
								<img src="img/pic/小面包3.png" />
								<h4>干果面包</h4>
							</a>

							<hr>
							<p>满满的麦麸颗粒，口感融合干果的醇香，麦香浓郁，粗糙不失柔韧。</p>
						</li>

					</ul>
				</div>
			</div>
		</div>

		<!--4、新概念面包-->
		<div class="myrow our-member ">
			<div class="container ">
				<!--头部行：只显示一列-->
				<div class="row ">
					<!--列-->
					<div class="col-sm-12 main-title ">
						<h2 class="h2 ">新概念面包 </h2>
						<p class="line "></p>

					</div>
				</div>
				<!--行：显示3列-->
				<div class="row">
					<div class="col-sm-4 data-item">
						<div><img src="img/pic/product1.png" /></div>
						<p>美味健康，好吃加倍</p>
						<h4 class="title">奶酪甜心</h4>
					</div>
					<div class="col-sm-4 data-item">
						<div><img src="img/pic/product2.png" /></div>
						<p>美味健康，好吃加倍</p>
						<h4 class="title">豆沙诱惑</h4>
					</div>
					<div class="col-sm-4 data-item">
						<div><img src="img/pic/product3.png" /></div>
						<p>美味健康，好吃加倍</p>
						<h4 class="title">蔓梅心情</h4>
					</div>
					<div class="col-sm-4 data-item"></div>
				</div>
			</div>

			<!--5、Happy Bread-->
			<div class="happy">
			<ul>
				<img src="../大作业/网页/img/pisa.png" />
				<li>
					<h3>Happy Bread</h3>
					<span> 作为已在亚洲经营了16年的烘焙品牌，Happy Bread 深知消费者对健康、<br>绿色食物的需求，同时也从未放弃对天然原料的坚持。新概念门店选用天然原料，<br>将烘焙艺术与现代科技完美结合，这是面包新语在产品研发上的又一创举，同时<br>满足了消费者在寻求更多天然食品上的需求。
                   </span>
				</li>
			</ul>

		</div>
			<!--6、最新动态-->
			<div class="myrow our-course ">
				<div class="container ">
					<div class="row ">
						<!--头部显示1列-->
						<div class="col-sm-12 main-title ">
							<h2 class="h2 ">最新动态</h2>
							<p class="line "></p>
							<h2>
							<small>每天更新关于跟多面包的不同资讯</small>
						</h2>
						</div>
					</div>
					<div class="row ">
						<!--显示三列-->
						<div class="col-sm-12 data-course ">
							<ul class="card-area ">
								<li class="card-item card-active ">
									<div class="card-title ">
										<h4>2017-08-21 17:26:54<span class="a2">软欧包</span></h4>

										<p><span class="a1">软欧包指的是外酥内软欧包，主要特色是无糖无油，且方便健康。可在......</p>

									</div>
									
								</li>
								<li class="card-item ">
									<div class="card-title ">
										<h4>2017-08-21 17:25:48<span class="a2">全麦面包</span></h4>

										<p>全麦面包是指用没有去掉外面麸皮和麦胚的全麦面粉制作的面包，区别......</p>
									</div>
									
								</li>
								<li class="card-item ">
									<div class="card-title ">
										<h4>2017-08-21 17:05:13<span class="a2">法国面包</span></h4>

										<p><span class="a1">法国面包(baguette)，因外形像一条长长的棍子，所以俗称法式棍，是......</p>
									</div>
									
								</li>
								<li class="card-item ">
									<div class="card-title ">
										<h4>2017-08-17 18:04:03<span class="a2">三明治</h4>

										<p><span class="a1">三明治，和三文治都是通过英文单词Sandwich音译的。三明治和汉堡是......</p>
									</div>
									
								</li>
								<li class="card-item ">
									<div class="card-title ">
										<h4>2017-08-17 18:02:45<span class="a2">蛋糕的由来</span></h4>

										<p><span class="a1">蛋糕是一种古老的西点，一般是由烤箱制作的，蛋糕是用鸡蛋、白糖、......</p>
									</div>
									
								</li>
								<li class="card-item ">
									<div class="card-title ">
										<h4>2017-08-17 17:53:43<span class="a2">奶酪包</span></h4>

										<p><span class="a1">奶酪包是一道美味烘焙甜品，面包主体料有高粉、白糖、酵母、盐、......</p>
									</div>
									
								</li>
							</ul>
						</div>

					</div>
				</div>
			</div>
			<div class="fooder">
			<dl>
				<div><dt>关于我们</dt>
					<hr>
					<dd>企业简介</dd>
					<dd>发展历程</dd>
					<dd>管理团队</dd>
				</div>
				<div><dt>代理品牌</dt>
					<hr>
					<dd>法式甜点</dd>
					<dd>日式调料</dd>
					<dd>过桥米线</dd>
				</div>

				<div><dt>菜单调料</dt>
					<hr>
					<dd>中式菜品</dd>
					<dd>西式甜点</dd>
					<dd>日式调料</dd>
				</div>

				<div><dt>新闻中心</dt>
					<hr>
					<dd>企业新闻</dd>
					<dd>加盟合作</dd>
					<dd>企业文化</dd>
				</div>
			</dl>
		</div>

			<!--7、返回顶部-->
			<div id="clan-slider ">
				<ul>
					<li class="hidden-xs ">
						<a id="slider-chat " class="web-chat " href="javascript:; "></a>
						<div class="clan-slider-tips ">
							在线咨询
						</div>
					</li>
					<li class="hidden-xs ">
						<a target="_blank " href="http://wpa.qq.com/msgrd?v=3&uin=274027502&site=qq&menu=yes " id="slider-qq "></a>
						<div class="clan-slider-tips ">
							QQ咨询
						</div>
					</li>
					<li class="hidden-xs ">
						<a id="slider-phone " href="javascript:void(0); "></a>
						<div class="clan-slider-tips ">
							010-64648731
						</div>
					</li>
					<li>
						<a id="slider-goTop " href="javascript:void(0); "></a>
					</li>

				</ul>
			</div>

			<!--先引用jquery，再引用bootstrap最后引用自己的-->
			<script src="bootstrap/js/jquery.min.js "></script>
			<script src="bootstrap/js/bootstrap.min.js "></script>
			<script src="index.js "></script>
			<script src="//game.gtimg.cn/images/dnf/cp/a20180524goblin/comm.js" type="text/javascript" charset="utf-8"></script>
	</body>

</html>